<template>
  <div v-if="props.isMemberUse" style="position: relative;border-radius:5px;width: 380px;">
  <el-upload v-bind="props" v-model:file-list="value"
      class="upload-demo1"
      drag
      action="https://www.caixue8.cn/api/upload/image"
      multiple
      :accept="props.upload_type"
      :limit="props.maxlength"
      :headers="headers"
      :data="data"
     :on-success="onSuccess"
     :before-upload="beforeUpload"
     :on-error="onError"
             :on-exceed="handleExceed"
  >
    <img src="https://www.caixue8.cn/uploads/image.png" class="pos-image" />
    <div class="el-upload__text">
      {{props.title}}
    </div>

  </el-upload>
  </div>
  <div v-else style="position: relative;border-radius:5px;width: 380px">
    <el-upload v-bind="props" v-model:file-list="value"
               class="upload-demo"
               drag
               action="https://www.caixue8.cn/api/upload/image"
               multiple
               :accept="props.upload_type"
               :limit="props.maxlength"
               :headers="headers"
               :data="data"
               :on-success="onSuccess"
               :on-error="onError"
               :before-upload="beforeUpload"
               :on-exceed="handleExceed"
    >

      <img src="https://www.caixue8.cn/uploads/image.png" class="pos-image" />
      <div class="el-upload__text">
        {{props.title}}
      </div>


    </el-upload>
  </div>
</template>

<script setup lang="ts">
import type { InputProps } from 'element-plus'
import { UploadFilled } from '@element-plus/icons-vue'
import {useUserStore} from "~/stores/user";
import {computed,ref} from "vue";
import {getVersion} from "~/utils/env";
const userStore = useUserStore()
interface Props extends Partial<InputProps> {}
const props = withDefaults(defineProps<Props>(), {
  showWordLimit: true,
  isEnable:true,
  isMemberUse:false
})
const emit = defineEmits<{
  (event: 'update:modelValue', value: any): void
}>()
const value = computed({
  get() {
    return props.modelValue
  },
  set(value) {
    emit('update:modelValue', value)
  }
})
const img_type = ref([])
if(props.upload_type){
  img_type.value = props.upload_type.split(',')
}
const headers = computed(() => ({
  token: userStore.token,
  version: getVersion()
}))
const data = computed(() => ({
  type: ''
}))
const onSuccess = (e) => {
  emit('img_generation', 1)
  if(e.code == 0){
    ElMessage({
      showClose: true,
      message: e.msg,
      type: 'error',
    })
    if (value.value && value.value.length > 0) {
      console.log('Filtering files...')
      value.value = value.value.filter(file => {
        console.log('File object:', file)
        console.log('File response:', file.response)
        return file.response.code !== 0
      })
    }
  }
}

const handleExceed = () => {
  ElMessage({
    showClose: true,
    message: '上传的文件数量不能超过 ' + props.maxlength + '个',
    type: 'error',
  })
}
const beforeUpload = (file) => {
  emit('img_generation', 0)
  const isLt500KB = file.size / 1024 / 1024 < props.maxupload;
  if (!isLt500KB) {
    ElMessage({
      showClose: true,
      message: '上传的文件大小不能超过 ' + props.maxupload + 'M',
      type: 'error',
    })
  }
  return isLt500KB;
}
const onError = (e) => {
  console.log(e)
  ElMessage({
    showClose: true,
    message: e.msg,
    type: 'error',
  })
  emit('img_generation', 1)
}

const onChange = (e) => {

    console.log(e)
}

</script>
<style lang="scss" scoped>
.pos-image {
  width: 40px!important;
  height: 40px!important;
  left:0;
  right: 0;
  text-align: center;
  margin: auto;
  top:50%
}
.upload-demo1{
  :deep(.el-upload-dragger) {
    border:0.5px solid #784c2c;
    padding: 10px;
  }
}
.upload-demo{
  :deep(.el-upload-dragger) {
    padding: 10px;
  }
}
</style>
